<template>
    <div ref="mychart" :style="{ 
        height: '600px',
        width: 'calc(100% - 40px)', 
        margin: '0 20px',
        backgroundColor: 'rgba(250, 251, 253, 1)',
        borderRadius: '8px'
        }"></div>
</template>

<script>
export default {
    name: 'chart',
    // TODO 这里应该入参应该为图表数据(data)和颜色(colors)等配置，这里先临时写成cpus做展示
    props: ['optionfn', 'datas'],
    data() {
        return {
            myChart: null,
        }
    },
    mounted() {
        this.myChart = this.$echarts.init(this.$refs.mychart);
        this.myChart.setOption(this.optionfn(this.datas));
        window.addEventListener('resize', () => {
            this.myChart.resize()
        })
    },
    watch:{
        datas() {
            // 每当datas变化时重新绘制一遍echrts
            this.myChart.setOption(this.optionfn(this.datas));
        }
    }
}
</script>